<template>
  <el-scrollbar>
    <div>
      <div class="box bg-fff flex jc-sb aic pr-20">
        <p class="pl-20">
          <strong class="f17 fw-700">设备列表</strong>
          <span class="f14"> - 监控所有设备状态</span>
        </p>
      </div>

      <div class="equipment flex mt-10">
        <el-card class="item">
          <template #header>
            <div class="card-header f14 flex aic rel">
              <strong>设备概览</strong>
              <div class="row center mt-5 ml-5">
                <el-popover
                  popper-style="background: gray; color: #fff"
                  width="335"
                  class="box-item pl-10"
                  content="统计当前账号下，绑定网关和传感器节点的总数量"
                  placement="bottom-start"
                >
                  <template #reference>
                    <el-icon><QuestionFilled /></el-icon>
                  </template>
                </el-popover>
              </div>
              <el-link class="abs f12" style="right: 10px; color: #409eff"
                >绑定设备</el-link
              >
            </div>
          </template>
          <div>
            <div class="flex aic jc-sb lh15">
              <img
                style="width: 51px; height: 95px"
                src="../../assets/gateway.png"
              />
              <el-divider class="line" direction="vertical" />
              <div class="flex fdc aic">
                <h1 class="fw-700">{{ countData.LoRaWAN?.total }}</h1>
                <strong>LoRaWAN</strong>
                <p>网关</p>
              </div>
              <el-divider class="line" direction="vertical" />
              <div class="flex fdc aic">
                <h1 class="fw-700">{{ countData.LoRaPP?.total }}</h1>
                <strong>LoRaPP</strong>
                <p>网关</p>
              </div>
              <el-divider class="line" direction="vertical" />
              <div class="flex fdc aic">
                <h1 class="fw-700">{{ countData.group }}</h1>
                <p>群组</p>
              </div>
              <el-divider class="line" direction="vertical" />
              <img
                style="width: 18px; height: 38px"
                src="../../assets/devNode2.png"
                alt=""
              />
              <div class="flex fdc aic">
                <h1 class="fw-700">{{ countData.sensor?.total }}</h1>
                <p>传感器节点</p>
              </div>
            </div>
          </div>
        </el-card>
        <el-card
          style="max-width: 300px; height: 250px"
          class="item ml-10 mr-10"
        >
          <template #header>
            <div class="card-header f14 flex aic rel">
              <strong>监控</strong>
              <div class="row center mt-5 ml-5">
                <el-popover
                  popper-style="background: gray; color: #fff"
                  width="335"
                  class="box-item pl-10"
                  content="统计当前账号下，绑定网关和传感器节点的总数量"
                  placement="bottom-start"
                >
                  <template #reference>
                    <el-icon><QuestionFilled /></el-icon>
                  </template>
                </el-popover>
              </div>
            </div>
          </template>
          <div class="f14">
            <p class="flex p-5 aic jc-sb">
              <span>网关离线</span>
              <el-tag round type="success">{{
                countData.sensor?.online
              }}</el-tag>
            </p>
            <p class="flex p-5 aic jc-sb">
              <span>节点离线</span>
              <el-tag round type="success">{{
                countData.sensor?.offline
              }}</el-tag>
            </p>
            <p class="flex p-5 aic jc-sb">
              <span>传感器低电量</span>
              <el-tag round type="danger">{{
                countData.sensor?.lowBattery
              }}</el-tag>
            </p>
          </div>
        </el-card>
      </div>

      <div v-for="(value, key) in list" :key="key" class="list mt-10">
        <el-card class="w100p">
          <template #header>
            <div class="card-header">
              <p class="f14 fw-700">{{ key }}</p>
            </div>
          </template>
          <div class="flex">
            <template v-if="value.length === 0">
              <p class="pt-30 pb-30">暂无数据</p>
            </template>
            <template v-else>
              <div v-for="(device, index) in value" :key="index">
                <div
                  class="item flex fdc aic jc-sb mr-10"
                  v-if="device.powerNum > 30"
                >
                  <i
                    :style="{
                      fontSize: '50px',
                      color: device.online ? 'green' : 'inherit',
                    }"
                    class="icon iconfont icon-yalichuanganqi"
                  ></i>
                  <h3 class="fw-700">{{ device.devValue }}</h3>
                  <p class="f14">空气温湿度</p>
                  <p class="eui p-5 f12">
                    EUI：<span>{{ device.eui }}</span>
                  </p>
                </div>
                <div v-else  class="item flex fdc aic jc-sb mr-10">
                  <p>    <i
                    :style="{
                      fontSize: '50px',
                      color: device.online ? 'green' : 'inherit',
                    }"
                    class="icon iconfont icon-yalichuanganqi"
                  ></i>
                <i style="color: red;" class="iconfont icon-dianliangbuzu"></i>
                </p>
                  <h3 class="fw-700">{{ device.devValue }}</h3>
                  <p class="f14">空气温湿度</p>
                  <p class="eui p-5 f12">
                    EUI：<span>{{ device.eui }}</span>
                  </p>
                </div>
              </div>
            </template>
          </div>
        </el-card>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { Warning } from "@element-plus/icons-vue";
import { $deviceCount, $deviceSensorList } from "../../api/index";
import { onMounted, ref } from "vue";
const countData = ref({});
const getCountData = async () => {
  let res = await $deviceCount();
  countData.value = res.data;
};
const list = ref({});
const getList = async () => {
  let res = await $deviceSensorList();
  list.value = res.data;
};
onMounted(() => {
  getCountData();
  getList();
});
</script>
<style lang="less">
.box {
  height: 60px;
}
.equipment {
  .item {
    flex-grow: 1;
  }
}
.line {
  height: 50px;
  border-left-width: 2px;
  &:nth-child(8) {
    height: 100px;
  }
}
.list {
  .item {
    width: 135px;
    height: 135px;
    border: 1px solid #ccc;
    .eui {
      background-color: #f3f4f5;
      text-align: center;
      width: 100%;
    }
  }
}
</style>    